import AudDialog, { AudDialogShowParams } from '@/pages/components/Aud/AudDialog';
import { Button, DataGrid, Form } from 'devextreme-react';
import { Column } from 'devextreme-react/data-grid';
import { SimpleItem } from 'devextreme-react/form';
import React, { useCallback, useImperativeHandle, useRef } from 'react';
import { useState } from 'react';


const DgSignature: React.FC<any> = React.forwardRef((props: any, ref) => {
    const [visible, setVisible] = useState<boolean>(false);
    const diaParams = useRef<AudDialogShowParams>();

    const SignatureRef = useRef<any>()


    // 自定义方法
    useImperativeHandle(ref, () => ({
        show: async (params: AudDialogShowParams) => {
            diaParams.current = params;
            setVisible(true);
        },
        close: () => { setVisible(false) }
    }));
    const data = [
        {
            name: '11',
            id: 0,
            price: 20
        },
        {
            name: '22',
            id: 1,
            price: 15.5
        },
        {
            name: '33',
            id: 2,
            price: 16.5
        },
    ]
    const Ok = useCallback(() => {
        setVisible(false)
    }, [])

    return (
        <>
            <AudDialog
                ref={ref}
                visible={visible}
                title={diaParams.current?.args?.title}
                minWidth={520}
                width={1005}
                height={500}
                {...props}
                onOK={Ok}
                showCancelButton={true}
                showOkButton={true}
                onCancel={() => {
                    setVisible(false)
                }}
                onHiding={() => setVisible(false)}
            >
                <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                    <DataGrid
                        width={650}
                        height={365}
                        className='PaperDevSortableGrid devHeadersCenter'
                        dataSource={data}
                        keyExpr="name"
                        // focusedRowEnabled={true}
                        hoverStateEnabled={true}
                        showBorders={true}
                        showColumnLines={false}
                        // 显示行的线
                        showRowLines={true}
                        allowColumnResizing={true}
                        selection={{
                            mode: 'multiple',
                            selectAllMode: 'allPages',
                            showCheckBoxesMode: 'onClick',
                        }}
                        onSelectionChanged={(e) => {
                            console.log(e.selectedRowsData);
                        }}
                    >
                        <Column caption='底稿名称' dataField="name" alignment='left' />
                    </DataGrid>
                    <Form
                        width={300}
                        ref={SignatureRef}
                        onFieldDataChanged={(e) => {
                            console.log(e, 'e----');
                        }}
                    >
                        <SimpleItem
                            editorType="dxSelectBox"
                            label={{ text: '编辑人' }}
                            editorOptions={{
                                dataSource: [
                                    { Name: '111', ID: 0 },
                                    { Name: '222', ID: 1 },
                                ],
                                displayExpr: 'Name',
                                valueExpr: 'ID',
                                searchEnabled: true,
                            }}
                        />
                        <SimpleItem
                            dataField="xmqjs"
                            label={{ text: '编辑日期' }}
                            editorType="dxDateBox"
                        />
                        <SimpleItem
                            editorType="dxSelectBox"
                            label={{ text: '复核人' }}
                            editorOptions={{
                                dataSource: [
                                    { Name: '111', ID: 0 },
                                    { Name: '222', ID: 1 },
                                ],
                                displayExpr: 'Name',
                                valueExpr: 'ID',
                                searchEnabled: true,

                            }}
                        />
                        <SimpleItem
                            dataField="xmqjs"
                            label={{ text: '复核时间' }}
                            editorType="dxDateBox"
                        />
                    </Form>
                </div>

            </AudDialog>

        </>
    );
});

export default DgSignature